﻿<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in root of repo. -->

<!--
    This file shows how to include inline error, success, and informational messages in an add-in. They are static in
    this example file, but typically they would appear in response to an event in a prodution add-in.
    -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Notifications - Inline Message</title>

    <!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">

    <!-- Template styles -->
    
    <link href="inline.message.css" rel="stylesheet" type="text/css" />
</head>
<body class="ms-font-l ms-notification-inline-message">
    <main class="ms-notification-inline-message__main">

        <!-- Tabbed header -->
        <section class="ms-notification-inline-message__header">
            <div class="ms-notification-inline-message__header--left">
                <i class="ms-Icon ms-Icon--chevronThickLeft ms-fontColor-themePrimary"></i>
            </div>
            <div class="ms-notification-inline-message__header--right ms-font-m ms-fontWeight-light">
                <p>Tab 1</p>
                <p class="ms-notification-inline-message__header--selected ms-fontColor-themePrimary ms-fontWeight-semibold">Tab 2</p>
            </div>
        </section>
        <!-- Content --> 
        <section class="ms-notification-inline-message__content ms-font-m ms-fontColor-neutralPrimary">
            <h2 class="ms-font-xl ms-fontWeight-light">Inline Notifications in Add-ins</h2>            
            <h3 class="ms-font-l">Use inline notification styles to emphasize messages within your add-in.</h3>
            <p>Error and success messages are used for task completion feedback in validation of forms, data processing, file uploads, and other user flows.</p>

            <p><span class="ms-notification-inline-message__span ms-fontColor-info ms-font-s ms-bgColor-info"><i class="ms-Icon ms-Icon--infoCircle"></i> This is an informational message.</span></p>
            <p><span class="ms-notification-inline-message__span ms-fontColor-success ms-font-s ms-bgColor-success"><i class="ms-Icon ms-Icon--check"></i> This is a success notification.</span></p>

            <p class="ms-notification-inline-message__input">
                <label for="password">This is an error notification</label>
                <input class="ms-borderColor-error ms-bgColor-error ms-fontColor-error" type="password" name="password" value="some text"/>
                <span class="ms-notification-inline-message__span ms-fontColor-error ms-font-s ms-bgColor-error"><i class="ms-Icon ms-Icon--exclamation"></i> Password must include a numeral.</span>
            </p>          
        </section>
    </main>

    <!-- Footer -->
    <footer class="ms-notification-inline-message__footer  ms-bgColor-themePrimary">
        <div class="ms-notification-inline-message__footer--left">
            <img src="/assets/logo-filled.png" />
            <h1 class="ms-font-xl ms-fontWeight-semilight ms-fontColor-white">My Add-in Name</h1>
        </div>
        <div class="ms-notification-inline-message__footer--right">
            <i class="ms-Icon ms-Icon--gear ms-fontColor-white"></i>
        </div>
    </footer>
</body>
</html>
